<template>
  <view class="courser_detail_container">
    <!-- 课程内容 -->
    <view class="course">
      <view class="banner">
        <image
          src="https://www.gulixueyuan.com/files/course/2022/11-15/10000666c9a9690562.jpg"
        />
      </view>

      <view class="info">
        <view class="price">
          <h3>
            <text>¥ {{ 123 }}</text>
          </h3>
          <view class="buy_count">已有 {{ 10 }} 人购买</view>
        </view>
        <h3 class="name">
          {{ "java精品课程" }}
        </h3>
        <view class="tag_list">
          <view class="tag_item">{{ "java" }}</view>
        </view>
      </view>

      <!-- 课程卡片 -->
      <view class="course_card">
        <!-- 讲师介绍 -->
        <view class="intro card">
          <view class="title"> 讲师介绍 </view>
          <navigator url="讲师详情" class="teacher_info">
            <view class="avatar">
              <image
                src="http://47.93.148.192:8080/group1/M00/01/72/rBHu8mEQyliAYtsQAAA0GUaiJrk198.jpg"
              />
            </view>
            <view class="teacher_desc">
              <view class="teacher_name">高级讲师-{{ "杨洪波" }}</view>
              <view class="teacher_intro">{{
                "中国人民大学软件工程硕士。精通java核心框架、大数据Hadoop、Spark技术，曾先后就职于南天软件、用友金融、中植集团、百合贷，任技术经理、项目经理、技术部负责人。主持开发了中信银行、国家电网、中植集团、东方资产等大型企业的金融类系统，也对时下流行的互联网金融有深入的研究。 十余年的项目经历，练就了纯厚的技术底蕴和丰富的职场经验。"
              }}</view>
            </view>
          </navigator>
          <view class="title"> 课程详情 </view>
          <!-- <view class="course_detail" v-html=''>  -->
          <view class="course_detail">
            本套Java视频完全针对零基础学员，课堂实录，自发布以来，好评如潮！Java视频中注重与学生互动，讲授幽默诙谐、细致入微，覆盖Java基础所有核心知识点，同类Java视频中也是代码量大、案例多、实战性强的。同时，本Java视频教程注重技术原理剖析，深入JDK源码，辅</view
          >
        </view>

        <!-- 课程目录 -->
        <view class="catalogue card">
          <view class="title"> 课程目录 </view>
          <view class="catalogue_list">
            <uni-collapse ref="collapse">
              <uni-collapse-item :title="'第一章 小程序基础'">
                <view class="task_list">
                  <view class="task_items">
                    <image
                      class="task_type"
                      src="https://cdn-cos-ke.myoed.com/ke_proj/mobilev2/m-core/f1c59a1527e075f6ebfba3d7ac605f07.png"
                    />
                    <view class="task_title">{{ "第一节： 小程序简介" }}</view>
                    <!-- v-show="!state.course.isBuy" -->
                    <image
                      v-show="true"
                      class="task_icon"
                      src="https://cdn-cos-ke.myoed.com/ke_proj/mobilev2/m-core/064fdd1eb99fcb8bef80085f2b548e4b.png"
                    />
                  </view>
                  <view class="task_items">
                    <image
                      class="task_type"
                      src="https://cdn-cos-ke.myoed.com/ke_proj/mobilev2/m-core/f1c59a1527e075f6ebfba3d7ac605f07.png"
                    />
                    <view class="task_title">{{
                      "第一接： 小程序基本语法"
                    }}</view>
                    <!-- v-show="!state.course.isBuy" -->
                    <image
                      v-show="true"
                      class="task_icon"
                      src="https://cdn-cos-ke.myoed.com/ke_proj/mobilev2/m-core/064fdd1eb99fcb8bef80085f2b548e4b.png"
                    />
                  </view>
                </view>
              </uni-collapse-item>
              <uni-collapse-item :title="'第二章 小程序项目'">
                <view class="task_list">
                  <view class="task_items">
                    <image
                      class="task_type"
                      src="https://cdn-cos-ke.myoed.com/ke_proj/mobilev2/m-core/f1c59a1527e075f6ebfba3d7ac605f07.png"
                    />
                    <view class="task_title">{{
                      "第一节： 小程序环境搭建"
                    }}</view>
                    <!-- v-show="!state.course.isBuy" -->
                    <image
                      v-show="true"
                      class="task_icon"
                      src="https://cdn-cos-ke.myoed.com/ke_proj/mobilev2/m-core/064fdd1eb99fcb8bef80085f2b548e4b.png"
                    />
                  </view>
                  <view class="task_items">
                    <image
                      class="task_type"
                      src="https://cdn-cos-ke.myoed.com/ke_proj/mobilev2/m-core/f1c59a1527e075f6ebfba3d7ac605f07.png"
                    />
                    <view class="task_title">{{
                      "第一接： 小程序项目开发"
                    }}</view>
                    <!-- v-show="!state.course.isBuy" -->
                    <image
                      v-show="true"
                      class="task_icon"
                      src="https://cdn-cos-ke.myoed.com/ke_proj/mobilev2/m-core/064fdd1eb99fcb8bef80085f2b548e4b.png"
                    />
                  </view>
                </view>
              </uni-collapse-item>
            </uni-collapse>
          </view>
        </view>

        <!-- 学员评价 -->
        <view class="comment card">
          <view class="title">
            <view class="title_left"> 学员评价（{{ 123 }}）</view>
            <!-- /pages/course/comment/index?courseId=${courseId}&teacherId=${state.courseDetail.teacherId} -->
            <navigator url="" class="title_right">
              查看全部<uni-icons
                type="right"
                color="#666c80"
                size="12"
              ></uni-icons>
            </navigator>
          </view>

          <!-- 评价列表 -->
          <view class="comment_wrapper">
            <view class="comment_list">
              <view class="comment_item">
                <view class="logo">
                  <image
                    src="https://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTLYaMAr2AKiccaJ3oV7NOBDWCkKJYHufeYGJyUeSavcw6cIlI5pwLyUT5ac0n6EHs4FjwfGWX06GeQ/132"
                  />
                </view>
                <view class="content_wrap">
                  <view class="name">{{ "志勇在线" }}</view>
                  <veiw class="date">
                    {{ "2023-03-05" }}
                    <uni-rate :touchable="false" :value="5" size="12" />
                  </veiw>
                  <view class="content">{{ "我是建工高启强" }}</view>
                </view>
              </view>
            </view>
            <uni-load-more
              status="more"
              :content-text="{ contentdown: '点击查看更多评论内容' }"
            />
          </view>
        </view>
      </view>
    </view>

    <!-- 返回顶部 -->
    <v-back-top></v-back-top>
    <!-- 底部购买 -->
    <view class="bottom_tabbar">
      <view class="bottom_wrap">
        <view class="bottom_button">
          <view class="favo_button" >
            <!-- <view :class="['bg', isCollect ? 'active' : '']"></view> -->
            <view :class="['bg, active']"></view>
            <!-- {{ isCollect ? "已收藏" : "收藏" }} -->
            收藏
          </view>
        </view>
        <view class="bottom_main">
          <view class="buy_button" >
            <!-- {{ state.course.isBuy ? "去学习" : "点击购买" }} -->
            去学习
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<script lang='ts' setup>
import { onLoad, onPageScroll } from "@dcloudio/uni-app";
// 页面滚动事件
onPageScroll((res) => {
  // console.log('页面滚动了');
  // 触发回到顶部组件中的自定义事件
  uni.$emit("onPageScroll", res.scrollTop);
});
</script>
<style lang='less' scoped>
.course {
  background: #f2f3f8;
  padding-bottom: 56px;
  .banner {
    height: 210px;
    width: 100%;
    image {
      width: 100%;
      height: 100%;
    }
  }

  .info {
    border-radius: 0 0 12px 12px;
    padding: 16px;
    margin-bottom: 12px;
    .price {
      display: flex;
      justify-content: space-between;
      h3 {
        color: #ff7b37;
        font-size: 20px;
        text {
          font-size: 12px;
        }
      }
      .buy_count {
        font-size: 12px;
        color: #666c80;
      }
    }

    .name {
      font-size: 18px;
      margin: 8px;
    }

    .tag_list {
      display: flex;
      .tag_item {
        border: 1px solid #666c80;
        color: #666c80;
        display: inline-block;
        padding: 0px 10px;
        font-size: 12px;
        height: 18px;
        border-radius: 16px;
        line-height: 18px;
        margin-right: 8px;
      }
    }
  }

  .tab_wrapper {
    border-radius: 0 0 12px 12px;
  }

  .title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 16px;
    color: #3c464f;
    padding: 16px 0;
    .title_left {
      &::before {
        content: "";
        width: 4px;
        height: 12px;
        border-radius: 10px;
        margin-right: 6px;
        background-color: #2979ff;
      }
    }
    .title_right {
      color: #666c80;
      font-size: 12px;
    }
  }
  .course_card {
    display: flex;
    flex-direction: column;
  }
  .card {
    padding: 0 16px;
    background: #fff;
    margin-bottom: 12px;
    flex: 1;
    // min-height: 1000px;
    // height: 100vh;
  }

  .intro {
    .teacher_info {
      display: flex;
      align-items: center;
      border-radius: 12px;
      background: #f5f6fa;
      padding: 12px;
      .avatar {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        image {
          width: 100%;
          height: 100%;
          border-radius: 50%;
        }
      }
      .teacher_desc {
        flex: 1;
        overflow: hidden;
        margin-left: 10px;
        .teacher_name {
          font-size: 12px;
          color: #3e414d;
        }
        .teacher_intro {
          word-break: break-all;
          font-size: 12px;
          color: #666c80;
          text-align: left;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          word-wrap: normal;
        }
      }
    }
    .course_detail {
      padding-bottom: 16px;
    }
  }

  .comment_list {
    .comment_item {
      display: flex;
      padding: 15px 0;
      border-bottom: 0.07143rem solid #ececec;

      .logo {
        border-radius: 50%;
        width: 32px;
        height: 32px;
        margin-right: 8px;
        image {
          border-radius: 50%;
          height: 100%;
          width: 100%;
        }
      }
      .content_wrap {
        font-size: 12px;
        color: #000;
        flex: 1;
        .date {
          color: #a1a5b2;
          display: flex;
          justify-content: space-between;
          align-items: center;
        }
        .content {
          margin-top: 8px;
        }
      }
    }
  }
  .catalogue {
    .catalogue_list {
      .task_list {
        .task_items {
          display: flex;
          padding: 12px;
          .task_type {
            width: 16px;
            height: 16px;
          }

          .task_title {
            flex: 1;
            font-size: 12px;
            color: #3e414d;
            margin-left: 10px;
            &::after {
              content: "";
              position: absolute;
              bottom: -12px;
              left: 0;
              width: 100%;
              height: 0.07143rem;
              background-color: #c9d0d6;
              transform: scaleY(0.5);
              opacity: 0.5;
            }
          }

          .task_icon {
            width: 16px;
            height: 16px;
          }
        }
      }
    }
  }
}
.bottom_tabbar {
  // background: #fff;
  background: linear-gradient(
    180deg,
    hsla(0, 0%, 86.7%, 0) 0,
    hsla(0, 0%, 86.7%, 0.2) 0.42857rem,
    hsla(0, 0%, 86.7%, 0.2) 0.57143rem,
    #fff 0.64286rem,
    #fff
  );
  padding: 8px 16px 0 16px;
  position: fixed;
  bottom: 0;
  z-index: 100;
  width: 100%;
  .bottom_wrap {
    display: flex;
    width: 100%;
    justify-content: space-between;
  }
  .bottom_button {
    flex: 1;
    padding: 6px 0;
    .favo_button {
      display: flex;
      align-items: center;
      flex-direction: column;
      font-size: 12px;
      color: #8797a1;
      .bg {
        width: 24px;
        height: 24px;
        background-image: url("https://cdn-cos-ke.myoed.com/ke_proj/mobilev2/m-core/0cfab2184a7ac26a164fdc334d40d382.png");
        background-size: 100% 100%;
        &.active {
          background-image: url("https://cdn-cos-ke.myoed.com/ke_proj/mobilev2/m-core/88b416217e2eca5e9e9f1f3fac1e7f24.png");
        }
      }
    }
  }
  .bottom_main {
    flex: 1;
    padding: 6px 0;
    .buy_button {
      width: 90%;
      height: 2.85714rem;
      line-height: 2.85714rem;
      text-align: center;
      color: #fff;
      border: none;
      font-size: 1.14286rem;
      border-radius: 7.14286rem;
      background-color: #ff7a38;
    }
  }
}
</style>